<!DOCTYPE html>
<html>
<head>
    <#include "/layout/baseHeader.ftl" />
    <script src="/js/jsencrypt.min.js"></script>
</head>
<body>
<div id="app">
    <i-form ref="myForm" :model="form" :rules="ruleValidate" :label-width="80">
        <Form-item label="用户账号" prop="userAccount">
            <i-input v-model="form.userAccount" placeholder="请输入" :disabled="form.userId"></i-input>
        </Form-item>
        <Form-item label="用户名" prop="userName">
            <i-input v-model="form.userName" placeholder="请输入"></i-input>
        </Form-item>
        <Form-item label="密码" v-if="!form.userId">
            <i-input v-model="form.userPasswd" disabled></i-input>
        </Form-item>
        <Form-item label="手机" prop="userMobile">
            <i-input v-model="form.userMobile" placeholder="请输入"></i-input>
        </Form-item>
        <Form-item label="启用/禁用">
            <i-switch v-model="form.available" :true-value="1" :false-value="0" size="large">
                <span slot="open">启用</span>
                <span slot="close">禁用</span>
            </i-switch>
        </Form-item>
    </i-form>
</div>
<script>
    const m_apis = {
        getModelEx(p_id) {
            return PB.apiRoute('/api/sys/userzj/getModel?id=' + p_id, 'GET')
        },
        save(p_form) {
            let enForm = PB.extend({}, p_form);
            enForm.userAccount = this._fmtData(p_form.userAccount);
            enForm.userName = this._fmtData(p_form.userName);
            enForm.userPasswd = this._fmtData(p_form.userPasswd);
            enForm.userMobile = this._fmtData(p_form.userMobile);
            return PB.apiRoute('/api/sys/userzj/saveForZhiCheng', 'POST', enForm)
        },
        _fmtData(str) {
            var jsencrypt = new JSEncrypt();
            jsencrypt.setPublicKey(window.winRSAPublicKey);
            // enData用来装载加密后的数据
            return jsencrypt.encrypt(str);
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                form: {
                    available: 1,
                    userPasswd: 'Gmcc20_18'
                },
                ruleValidate: {
                    userAccount: [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                    ],
                    userName: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'}
                    ],
                    userMobile: [
                        {required: true, message: '手机不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            if (PB.getPara('id')) {
                this.getModel(PB.getPara('id'));
            }
        },
        methods: {
            getModel(id) {
                let that = this;
                PB.ajax(this.apis.getModelEx(id), function (d) {
                    that.form = d.data;
                });
            },
            save() {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        if(!PB.chkPWD(this.form.userPasswd)){
                            PB.formPageSaveError();
                            return;
                        }

                        PB.ajax(this.apis.save(this.form), {isInFramePage: true}, function (d) {
                            PB.formPageSaveOK(d);
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                        PB.formPageSaveError();
                    }
                })
            },

        }
    });

    function save() {
        vm.save();
    }
</script>
</body>
</html>
